<template>
  <div>
    <el-form style="margin-right: 20px;">
      <a-row class="ant-form-item form-item ">
        <a-row-item label="类型：" label-col="4" wrapper-col="8">
          <a-tag color="purple">{{ currentSelect.type }}</a-tag>
        </a-row-item>
      </a-row>
      <a-row class="ant-form-item form-item ">
        <a-row-item label="步骤id：" label-col="4" wrapper-col="20">
          <el-input :value="currentSelect.id" disabled />
        </a-row-item>
      </a-row>
      <a-row class="ant-form-item form-item ">
        <a-row-item label="步骤名称：" label-col="4" wrapper-col="20">
          <el-input
            placeholder="请输入步骤名称"
            v-model="currentSelect.nodeName"
          />
        </a-row-item>
      </a-row>
      <a-row class="ant-form-item form-item ">
        <a-row-item label="宽度：" label-col="4" wrapper-col="8">
          <el-input placeholder="请输入宽度" v-model="currentSelect.width" />
        </a-row-item>
        <a-row-item label="高度：" label-col="4" wrapper-col="8">
          <el-input placeholder="请输入高度" v-model="currentSelect.height" />
        </a-row-item>
      </a-row>
      <a-row class="ant-form-item form-item ">
        <a-row-item label="子流程：" label-col="4" wrapper-col="20">
          <el-select v-model="currentSelect.subWorkflowId" class="item_width">
            <el-option
              v-for="item in flowList"
              :key="item.id + ''"
              :label="item.name"
              :disabled="item.id === flowData.attr.id"
              :value="item.id + ''"
            >
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </a-row-item>
      </a-row>
    </el-form>
  </div>
</template>

<script>
import ARowItem from "./ARowItem";
import FormDataTable from "./FormDataTable";
import _ from "lodash";

export default {
  name: "FlowNodeAttr",
  props: ["flowData", "select"],
  components: {
    ARowItem,
    FormDataTable
  },
  data() {
    return {
      signatureTypes: this.getDictionary("WORKFLOW_SIGN_TYPE"),
      behaviorFlowTypes: this.getDictionary("WORKFLOW_FLOW_TYPE"),
      handlerTypes: this.getDictionary("WORKFLOW_HANDLER_TYPE"),
      handlerSteps: this.getDictionary("WORKFLOW_HANDLER_TYPE"),
      handlerBehaviors: this.getDictionary("WORKFLOW_HANDLE_BEHAVIOR"),
      behaviorBacks: this.getDictionary("WORKFLOW_BEHAVIOR_BACK"),
      counterSignatures: this.getDictionary(
        "WORKFLOW_BEHAVIOR_COUNTERSIGNATURE"
      ),
      backTypes: this.getDictionary("WORKFLOW_BACK_TYPE"),
      currentSelect: _.cloneDeep(this.select),
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 8 }
      },
      activeKey: "flow-attr",
      tabActiveKey: "base",
      buttonData: [],
      buttonSelected: [],
      curSelectButton: {},
      curRightButton: {},
      formCategoryList: [],
      pcFormList: [],
      mobileFormList: [],
      fieldData: [],
      flowList: [], // 所有流程
      selectRange: "" //选择范围
    };
  },
  created() {},
  mounted() {
    this.getWorkBtnList();
    this.getCategoryTree();
    this.getWorkFlowList();
    this.getFieldData();
    if (this.currentSelect.form.formType) {
      this.getFormList();
    }
    if (this.currentSelect.form.appFormType) {
      this.getMobileFormList();
    }
  },
  computed: {},
  methods: {
    // 获取工作流列表
    getWorkFlowList() {
      this.API.getWorkflowList().then(res => {
        this.flowList = res.data;
      });
    },

    // 根据数据库表名获取数据字段信息
    getFieldData() {
      if (
        this.flowData &&
        this.flowData.attr &&
        this.flowData.attr.titleFieldTable
      ) {
        this.API.getWorkflowTableFieldList({
          tableName: this.flowData.attr.titleFieldTable
        }).then(res => {
          this.fieldData = res.data;
        });
      }
    },
    getFormList(val) {
      this.API.getWorkflowFormList({ categoryId: val }).then(res => {
        this.pcFormList = res.data;
      });
    },
    pcFormChange(val) {
      this.pcFormList.map(item => {
        if (item.id === val) {
          this.currentSelect.form.formName = item.name;
        }
      });
    },
    mobileFormChange(val) {
      this.mobileFormList.map(item => {
        if (item.id === val) {
          this.currentSelect.form.appFormName = item.name;
        }
      });
    },
    getMobileFormList(val) {
      this.API.getWorkflowFormList({ categoryId: val }).then(res => {
        this.mobileFormList = res.data;
      });
    },
    deepStyle(item) {
      return "margin-left:" + item.deep * 3 + "px";
    },
    // 获取表单类型
    getCategoryTree() {
      this.API.getCategoryTree({ type: "FORM", parentId: 0 }).then(res => {
        if (res.data) {
          console.log(res.data, 11);
          this.formCategoryList = [];
          let tem = this.setCategoryDeep(res.data, 1);
          console.log(tem);
        }
      });
    },
    // 设置分类的深度
    setCategoryDeep(data, deep) {
      console.log(data, deep);
      data.map(item => {
        item.deep = deep;
        let nextDeep = deep + 1;
        this.formCategoryList.push(item);
        if (item.children) {
          item.children = this.setCategoryDeep(item.children, nextDeep);
        }
      });
      return data;
    },
    // 查询按钮信息列表
    getWorkBtnList() {
      this.API.getWorkflowButtonList().then(res => {
        if (res.data) {
          res.data.map(item => {
            item.checked = false;
          });
        }
        this.buttonData = res.data;
        console.log(this.currentSelect.buttons, "button");
        if (
          this.currentSelect !== undefined &&
          this.currentSelect.buttons !== undefined &&
          this.currentSelect.buttons.length > 0
        ) {
          this.currentSelect.buttons.map((item, index) => {
            this.buttonData.map(button => {
              if (button.id === item.buttonId) {
                this.buttonSelected.push({
                  id: item.buttonId,
                  name: item.buttonName,
                  ico: button.ico,
                  checked: false
                });
              }
            });
          });
        }
      });
    },
    getFields(val) {
      this.currentSelect.fields = val;
    },
    tabChange(tab) {
      this.tabActiveKey = tab;
    },
    // 左侧按钮选择点击事件
    leftButtonSelect(item) {
      this.buttonData.map(item => {
        item.checked = false;
      });
      item.checked = true;
      this.curSelectButton = item;
    },
    // 右侧按钮选择点击事件
    rightButtonSelect(item) {
      this.buttonSelected.map(item => {
        item.checked = false;
      });
      item.checked = true;
      this.curRightButton = item;
    },
    // 确认选择的按钮
    confirmSelectButton() {
      if (this.curSelectButton) {
        this.buttonSelected.push(this.curSelectButton);
      }
    },
    // 删除选择的按钮
    delSelectButton() {
      if (this.curRightButton) {
        this.buttonSelected.map((item, index) => {
          if (item.id === this.curRightButton.id) {
            this.buttonSelected.splice(index, 1);
          }
        });
      }
    }
  },
  watch: {
    currentSelect: {
      handler(val) {
        console.log(val, "select0000000000");
        this.$emit("getNodeData", val);
      },
      deep: true
    },
    "currentSelect.form.formType": {
      handler(val) {
        this.getFormList(val);
      },
      deep: true
    },
    "currentSelect.form.appFormType": {
      handler(val) {
        this.getMobileFormList(val);
      },
      deep: true
    },

    buttonSelected: {
      handler(val) {
        if (val && val.length > 0) {
          let tem = [];
          val.map((item, index) => {
            tem.push({ buttonId: item.id, buttonName: item.name, sort: index });
          });
          this.currentSelect.buttons = tem;
        }
      },
      deep: true
    }
  }
};
</script>

<style lang="scss">
@import "../style/flow-node-attr.scss";
</style>
